<template>
	<div>
		<typeGroup :name="data.name" @edit="showEdit()" @delete="deleteRow()">
	  	<groupHDetail :data="props.data" @change="changeValue"></groupHDetail>
	  </typeGroup>

	  <el-dialog
	    v-model="dialog.visible"
	    width="800px"
	    draggable>
	    <template #header>
	    	<div style="color: #fff">标题配置</div>
	    </template>
	    <el-form>
	    	<el-form-item label="标题名称：">
	    		<el-input v-model="dialog.form.text"/>
	    	</el-form-item>
	    	<el-form-item label="标题类型：">
	    		<el-select v-model="dialog.form.type" placeholder="请选择" style="width: 240px" @change="changeType">
				    <el-option
				      v-for="item in H_LIST"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"/>
				  </el-select>
	    	</el-form-item>
	    	<el-form-item label="标题样式：">
	    		<el-input v-model="dialog.form.style" type="textarea" :rows="5" placeholder="请输入"/>
	    	</el-form-item>
	    </el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialog.visible = false">关闭</el-button>
	        <el-button type="primary" @click="saveData()">确定</el-button>
	      </span>
	    </template>
	  </el-dialog>
	</div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'
	import { ElMessage } from 'element-plus'
	import typeGroup from "./type-group.vue";
	import groupHDetail from "./group-h-detail.vue";
	import {H_LIST, TRANS_STYLE} from "../components.js";

	const emits = defineEmits(['delete', 'change']);

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})

	const _d = reactive({
		
	})

	const dialog = reactive({
		visible: false,
		form: {
			text: '',
			type: '',
			style: '',
		}
	})
	
	onMounted(() => {
	
	})

	// 改变类型
	function changeType(value) {
		let row = H_LIST.find(item => item.value == value);
		// 改变样式
		dialog.form.style = TRANS_STYLE.jsonJoinInput(row.style, dialog.form.style);
	}

	function showEdit() {
		dialog.form.text = props.data.attr.text;
		dialog.form.type = props.data.attr.type;
		dialog.form.style = TRANS_STYLE.jsonToString(props.data.attr.style);
		dialog.visible = true;
	}

	function saveData() {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.text = dialog.form.text;
		data.attr.type = dialog.form.type;
		data.attr.style = TRANS_STYLE.stringToJson(dialog.form.style);
		emits('change', data);
	}

	function deleteRow() {
		emits('delete');
	}

	function changeValue(val) {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.text = val;
		emits('change', data);
	}

</script>

<style scoped>

</style>